<template>
    <div class="footer_content">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getPagination_pageNum"
          :page-sizes="[10, 20]"
          :page-size="getPagination_pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="getPagination_total"
        ></el-pagination>
      </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
   export default {
    props:{
      getSeach:{
        type:String
      }
    },
    data() {
        return {
          ...mapGetters({
            table_seach:this.getSeach
          }),
        }
    },
    computed: {
      ...mapState({
          getPagination_total:state=>state.pubilcModule.pagination_total,
          getPagination_pageSize:state=>state.pubilcModule.pagination_pageSize,
          getPagination_pageNum:state=>state.pubilcModule.pagination_pageNum,
      }),
      
    },
    methods: {
        ...mapMutations({
          setPagination_total:'pubilcModule/setPagination_total',
          setPagination_pageSize:'pubilcModule/setPagination_pageSize',
          setPagination_pageNum:'pubilcModule/setPagination_pageNum',
        }),
        handleSizeChange(val){
            this.setPagination_pageSize(val);
            //触发查询
            console.log(JSON.stringify(this.table_seach()))
            this.$notify({
              title:'搜索发送给后端的查询数据！',
              message:JSON.stringify(this.table_seach()),
              type:'success'
            });
        },
        handleCurrentChange(val){
            this.setPagination_pageNum(val);
            //触发查询
            console.log(JSON.stringify(this.table_seach()))
            this.$notify({
              title:'搜索发送给后端的查询数据！',
              message:JSON.stringify(this.table_seach()),
              type:'success'
            });
        }
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
